@charset "utf-8";
@import "./conf";
@import "./loading";

.bk-process{
    display: flex;
    position: relative;
    .bk-process-toggle{
        position: relative;
        left: 15px;
        width: 24px;
        height: 24px;
        line-height: 24px;
        border-radius: 50%;
        text-align: center;
        border: 1px solid #c3cdd7;
        font-size: 12px;
        color: #737987;
        text-decoration: none;
        &.active,
        &:hover{
            color: #fff;
            background: $formBorderFocusColor;
            border-color: $formBorderFocusColor;
        }
    }
    > ul{
        display: table;
        width: 100%;
        display: flex;
        -ms-display: flex;
        -moz-display: flex;
        -webkit-display: flex;
        margin: auto;
        padding: 0;
    }    
    li{
        background: #dde4eb;
        display: table-cell;
        flex: 1;
        -ms-flex: 1;
        -moz-flex: 1;
        -webkit-flex: 1;
        text-align: center;
        height: 24px;
        line-height: 24px;
        position: relative;
        font-size: 12px;
        color: #737987;
        i{
            display: none;
        }
        &:first-of-type{
            border-radius: 13px 0 0 13px;
        }
        &:last-of-type{
            border-radius:  0 13px 13px 0;
            &::before{
                display:none;
            }
            &::after{
                display:none;
            }
        }
        &::before{
            content:"";
            width: 0;
            height: 0;
            border: 12px solid;
            border-color: transparent transparent transparent #fff;
            position: absolute;
            right: -25px;
            top: 0;
            z-index: 1;
        }
        &::after{
            content:"";
            width: 0;
            height: 0;
            border: 12px solid;
            border-color: transparent transparent transparent #dde4eb;
            position: absolute;
            right: -23px;
            top: 0;
            z-index: 1;
        }
        & .bk-process-step{
            color: #737987;
            font-size: 12px;
            dd{
                margin: 0;
                line-height: 32px;
            }
            i{
                display: none;
            }
            & .success{
                i{
                    display: inline-block;
                    color: $successColor;
                }
            }
            .steps-loading {
                top: -2px;
            }
        }
        &.bk-process-success{
            background: $successColor;
            color: #fff;
            &::after{
                border-color: transparent transparent transparent $successColor;
            }
            & .bk-process-step{
                i{
                    color: $successColor;
                }
            }
            i{
                display: inline-block;
            }
        }
        &.success{
            background: $successColor;
            color: #fff;
            &::after{
                border-color: transparent transparent transparent $successColor;
            }
            & .bk-process-step{
                i{
                    color: $successColor;
                }
            }
            i{
                display: inline-block;
            }
        }
        &.current{
            background: $formBorderFocusColor;
            color: #fff;
            &::after{
                border-color: transparent transparent transparent $formBorderFocusColor;
            }
            >.bk-spin-loading{
                vertical-align: -3px;
            }
        }
        &.bk-process-current{
            background: $formBorderFocusColor;
            color: #fff;
            &::after{
                border-color: transparent transparent transparent $formBorderFocusColor;
            }
            >.bk-spin-loading{
                vertical-align: -3px;
            }
        }
        // .steps-enter-active, .steps-leave-active {
        //     transition: all 0.5s ease 
        // }
        // .steps-enter, .steps-leave-active {
        //     opacity: 0
        // }
    }
}